<template>
  <div id="app">
    <h2>我是网站标题</h2>
    <!--<router-link>：该标签是一个vue-router中已经内置的组件，它会被渲染成一个<a>标签-->

    <router-link to="/home">首页</router-link>
    <router-link to="/about">关于</router-link>

    <!--tag可以指定<router-link>之后渲染成什么组件，比如下面的代码会被渲染成一个<button>元素，而不是<a>元素-->

    <!--<router-link to="/home" tag="button">首页</router-link>-->
    <!--<router-link to="/about" tag="button">关于</router-link>-->

    <!--replace不会留下history记录，所以指定replace的情况下，后退键返回不能返回到上一个页面中-->

    <!--<router-link to="/home" replace>首页</router-link>-->
    <!--<router-link to="/about" replace>关于</router-link>-->

    <!--当<router-link>对应的路由匹配成功时，会自动给当前元素设置一个router-link-active的class，设置active-class可以修改默认的名称-->

    <!--<router-link to="/home" tag="button" active-class="active">首页</router-link>-->
    <!--<router-link to="/about" tag="button" active-class="active">关于</router-link>-->

    <!--通过代码跳转路由-->
    <!--<button @click="homeClick">首页</button>-->
    <!--<button @click="aboutClick">关于</button>-->

    <!--<router-view>：该标签会根据当前的路径，动态渲染出不同的组件，在路由切换时，切换的是<router-view>挂载的组件，其他内容不会发生改变-->
    <router-view/>
    <h2>我是底部版权信息</h2>
  </div>
</template>

<script>
export default {
  name: 'App',
  methods: {
    homeClick() {
      console.log("homeClick");
      this.$router.push('/home');
      // this.$router.replace('/home');
    },
    aboutClick() {
      console.log("aboutClick");
      this.$router.push('/about');
      // this.$router.replace('/about');
    }
  }
}
</script>

<style>
  .active {
    color: #f00;
  }
</style>
